<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>gamepic-test</title>
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/effects.css">
    <script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script src="js/stickyelements-animate.js"></script>
    <script src="js/ocanvas-2.8.5.min.js"></script>
    <script src="js/easeljs-0.8.2.min.js"></script>
    <style type="text/css" media="screen">
    #myCanvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <!-- particles.js container -->
    <div id="particles-js">
    </div>
    <!--content start-->
    <canvas id="myCanvas" style="cursor: inherit;">
        您的浏览器不支持canvas！
    </canvas>
    <!-- scripts -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../particles.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/stickyelements-animate.js"></script>
    <script type="text/javascript">
var canvas = document.getElementById('myCanvas'); //获取canvas元素
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    var ctx = canvas.getContext('2d'), //获取画图环境，指明为2d
        centerX = canvas.width / 2, //Canvas中心点x轴坐标
        centerY = canvas.height / 2, //Canvas中心点y轴坐标

//创建一个舞台，得到一个参考的画布
    stage = new createjs.Stage("myCanvas");
    //创建一个形状的显示对象
    circle = new createjs.Shape();
    circle.graphics.beginStroke("#fff").drawCircle(0, 0, 60);
    //形状实例的设置位置
    circle.x =  centerX;
    circle.y = centerY;
    //添加形状实例到舞台显示列表
    stage.addChild(circle);

      // 绘制开始
    var dx = canvas.width / 2; //中心点横坐标
    var dy = canvas.height / 2; //中心点纵坐标
    var r = 60; //半径
    var dig = Math.PI * 2 / 9; //角度,整个圆分为9份
    for (var i = 0; i < 9; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        var endX = dx + x * (r + 180); //绘制终点x坐标
        var endY = dy + y * (r + 180); //绘制终点y轴坐标

    }
    //更新舞台将呈现下一帧
    stage.update();

    
    </script>
</body>

</html>
